<template>
  <el-popover
    popper-class="mp-micro"
    placement="bottom"
    :width="290"
    height="300"
    v-model="visible"
    trigger="click">
    <div class="default-popver">
      <el-row>
        <moSelect
          :data="tabs[0].list"
          v-if="tabs[0].type !== 'dept'"
          :value="value[tabs[0].type]"
          :defaultProps="tabs[0].defaultProps"
          @handleCheckChange="handleCheckChange"
          :showCheckbox="true">
        </moSelect>
        <deptTree
          v-else
          :treeData="tabs[0].list"
          @handleCheckChange="handleCheckChange"
          :defaultCheckedKeys="value[tabs[0].type]"
          :defaultProps="tabs[0].defaultProps"></deptTree>
      </el-row>
    </div>
    <inputContent :clear="clear" :visible="visible" :selected="tags.length" slot="reference" :multiRow="true">
        <el-tag closable v-for="one in tags" class="tag" :key="one.id" size="small" @close="close(one)"><span class="ellipsis">{{one && one.name}}</span></el-tag>
    </inputContent>
  </el-popover>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import inputContent from '@/afterSales/components/select/inputContent.vue';
import moSelect from '@/afterSales/components/moSelect/index.vue';
import deptTree from '@/afterSales/components/depTree/index.vue'
@Component({
  name: 'optionalScope',
  components: {
    inputContent,
    moSelect,
    deptTree
  }
})
export default class extends Vue {
  @Prop(Object) public value!: any
  @Prop(Object) public fieldType!: string
  @Prop({ default: () => [] }) public tabs!: any[]
  @Prop({ default: true }) public isCheckbox!: boolean
  private visible = false

  private get tags () {
    const arr: any = []
    if (this.value) {
      this.tabs.map(({ type, listMap, defaultProps }) => {
        if (this.value[type]) {
          this.value[type].map((id) => {
            // eslint-disable-next-line no-mixed-operators
            const name = listMap[id] && listMap[id][defaultProps.name] || ''
            arr.push({ name, id, type })
          })
        }
      })
    }
    return arr
  }

  private clear () {
    this.tabs.forEach((tab) => {
      this.value[tab.type] = []
    })
  }

  private handleCheckChange (options) {
    const type = this.tabs[0].type
    this.value[type] = options
  }

  private close ({ id, type }) {
    this.value[type] = this.value[type].filter((one) => one !== id)
  }
}
</script>

<style lang="stylus">
.popver-head
  border-bottom: 1px solid #e6e6e6;
  margin-bottom 10px
  .tabs-item
    line-height: 40px;
    display: inline-block;
    cursor: pointer;
    padding: 0px 10px;
</style>
